<template>
	<basic-container>
		<el-container>
			<el-aside width="250px">
				<avue-tree :option="treeoption" :data="treedata" @node-click="nodeClick" @save="treesave" @del="treedel" v-model="treeform">
				</avue-tree>
			</el-aside>
			<el-main>
				<avue-crud :option="option" :data="data" :page="page" ref="crud" v-model="form" :before-open="beforeOpen" @row-del="rowDel"
				 @row-update="rowUpdate" @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset"
				 @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange" @on-load="onLoad">
					<template slot-scope="{row}" slot="status">
						<el-tag :type='row.status=="1"?"":"info"' size="mini">{{row.status=="1"?"启用":"停用"}}</el-tag>
					</template>
				</avue-crud>
			</el-main>
		</el-container>
	</basic-container>
</template>

<script>
	import {
		getList,
		remove,
		update,
		add,
		getDict,
		getDictTree,
		treeRemove,
		treeAdd,
		treeUpdate
	} from "@/api/system/dict";

	export default {
		data() {
			return {
				typeId: '',
				treeform: {},
				treedata: [],
				treeoption: {
					nodeKey: 'id',
					size: 'small',
					defaultExpandAll: true,
					addBtn: true,
					formOption: {
						emptyBtn: false,
						labelWidth: 80,
						column: [{
							label: '排序',
							prop: 'sort',
							type: "number"
						}, {
							label: 'ID',
							prop: 'id',
							disabled: true,
							placeholder: "系统自动生成"
						}, {
							label: '编码',
							prop: 'value',
							disabled: true,
							placeholder: "系统自动生成"
						}],
					}
				},
				form: {
					typeId: ""
				},
				selectionList: [],
				query: {},
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				option: {
					searchMenuSpan: 4,
					tip: false,
					border: true,
					index: true,
					viewBtn: false,
					refreshBtn: false,
					//delBtn:false,
					menuWidth: 150,
					column: [{
							label: "字段ID",
							prop: "id",
							hide: true,
							disabled: true,
							placeholder: "系统自动生成"
						},
						{
							label: "字段分类",
							prop: "typeId",
							width: "120px",
							type: "tree",
							dicData: [],
							props: {
								value: "id"
							},
							rules: [{
								required: true,
								message: "请选择字段分类",
								trigger: "click"
							}]
						},
						{
							label: "字段名称",
							prop: "name",
							width: "200px",
							search: true,
							rules: [{
								required: true,
								message: "请输入字段名称",
								trigger: "blur"
							}]
						},
						{
							label: "字段编码",
							prop: "code",
							width: "150px",
							search: true
						},
						{
							label: "排序",
							prop: "sort",
							width: "60px",
							type: "number",
							rules: [{
								required: true,
								message: "请输入排序",
								trigger: "blur"
							}]
						},
						{
							label: "状态",
							prop: "status",
							type: "switch",
							slot: true,
							width: "70px",
							value: true,
							dicData: [{
									label: "停用",
									value: false
								},
								{
									label: "启用",
									value: true
								}
							]
						},
						{
							label: "字段备注",
							prop: "remark",
							span: 24
						},
					]
				},
				data: []
			};
		},
		computed: {
			ids() {
				let ids = [];
				this.selectionList.forEach(ele => {
					ids.push(ele.id);
				});
				return ids.join(",");
			}
		},
		created() {
			this.refreshTree();
		},
		mounted() {},
		methods: {
			refreshTree() {
				getDictTree().then(res => {
					const data = res.data;
					this.treedata = data;
					this.findObject(this.option.column, 'typeId').dicData = data;
				});
			},
			treedel(data, done) {
				treeRemove(data.id).then(() => {
					this.refreshTree();
					done();
				}, error => {
					console.log(error);
				});
			},
			update(parent, data, done, loading) {
				console.log(parent);
				this.$message.success('更新')
				done();
				//     treeUpdate(this.treeform).then(() => {
				// this.refreshTree();
				//       done();
				//     }, error => {
				//       done();
				//       console.log(error);
				//     });
			},
			treesave(parent, data, done, loading) {
				if (parent.id != undefined) {
					this.treeform.id = parent.id
				}
				treeAdd(this.treeform).then(() => {
					this.refreshTree();
					done();
				}, error => {
					done();
					console.log(error);
				});
			},
			nodeClick(data) {
				this.typeId = data.id;
				this.onLoad(this.page);
			},
			rowSave(row, loading, done) {
				add(row).then(() => {
					loading();
					this.onLoad(this.page);
				}, error => {
					done();
					console.log(error);
				});
			},
			rowUpdate(row, index, loading, done) {
				update(row).then(() => {
					loading();
					this.onLoad(this.page);
				}, error => {
					done();
					console.log(error);
				});
			},
			rowDel(row) {
				this.$confirm("确定将选择数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return remove(row.id);
					})
					.then(() => {
						this.onLoad(this.page);
					});
			},
			searchReset() {
				this.query = {};
				this.page.currentPage = 1;
				this.onLoad(this.page);
			},
			searchChange(params, done) {
				this.typeId = "";
				this.page.currentPage = 1;
				this.query = params;
				this.onLoad(this.page, params);
				done();
			},
			selectionChange(list) {
				this.selectionList = list;
			},
			beforeOpen(done, type) {
				this.form.typeId = this.typeId;
				if (["edit", "view"].includes(type)) {
					getDict(this.form.id).then(res => {
						this.form = res.data.data;
					});
				}
				done();
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			onLoad(page, params = {}) {
				getList(page.currentPage, page.pageSize, Object.assign(params, this.query), this.typeId).then(res => {
					const data = res.data;
					this.data = data.data;
					this.page.total = data.remark;
				});
			}
		}
	};
</script>

<style>
</style>
